<!--
 * @Description: 资源管理---运维资源
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <div class="devOpsResource">
        <el-row class="el-query-bar">
            <el-col :span="3">
                <el-input
                        size="small"
                        placeholder="请输入条目"
                        v-model="resourceName">
                </el-input>
            </el-col>
            <el-col :span="4" style="padding-left: 8px">
                <el-button @click="searchClick" type="primary">搜索</el-button>
            </el-col>
        </el-row>
        <div class="main-content" style="height: calc(100% - 70px);padding:0 15px;">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :label="tab.label" :name="tab.id" :key="index" v-for="(tab ,index) in tabs"></el-tab-pane>
            </el-tabs>
            <router-view ref="router" @flush="flushPage" class="sub-wrapper"></router-view>
        </div>
    </div>
</template>

<script>
    import tabs, {_getItemObj} from './data/tabs';
    import AppDialog from "@/components/AppCommon/AppDialog"
    import AppStatus from "@/components/AppCommon/AppStatus"
    import {dateFormat} from "@/utils/tool"

    export default {
        name: "devOpsResourceMain",
        components: {
            AppDialog,
            AppStatus
        },
        computed: {},
        data: () => ({
            resourceName: '',
            tabs: tabs,
            activeName: 'server',
            isShowAddDialog: true,
            dateFormat: dateFormat,
        }),
        created() {

        },
        mounted() {
           this.$nextTick(()=>{
               if(this.$route.path!=='/main/devOpsResource/server'){
                   this.$router.push('/main/devOpsResource/server');
               }
           })
        },
        watch: {},
        methods: {
            flushPage(){
                this.resourceName='';
            },
            searchClick() {
                this.$refs.router["searchGridByResName"]&&this.$refs.router["searchGridByResName"](this.resourceName);
            },
            handleClick() {
                let itemObj = _getItemObj(this.activeName, tabs);
                if(this.$route.path===itemObj["path"]){
                    return void(0);
                }
                if (itemObj != null) {
                    this.$router.push(itemObj["path"]);
                }
            }
        }
    };
</script>

<style lang="scss">
    .devOpsResource .sub-wrapper {
        height: calc(100% - 90px);
    }

    .devOpsResource .el-tabs__header {
        margin-bottom: 8px;
    }

</style>